<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="人工解讀"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-20">
					<view class="box-problem p-20 mb-20">
						<view class="mb-20">
							<view class="flex items-center mb-20">
								<ImageBoxVue src="/static/icons/title.png" width="35rpx" height="29rpx"></ImageBoxVue>
								<view class="flex items-center">
									<text class="text-sm ml-10">请详细描述您的问题</text>
									<text class="text-sm text-[#999999]">(最低10字)</text>
								</view>
							</view>
							<uni-easyinput type="textarea" v-model="postFrom.describe" :inputBorder="false"
								placeholder="我最近总是觉得做什么都没干劲总觉得自己很无能，想知道自己是不是抑郁了."></uni-easyinput>
						</view>
						<view class="flex items-center bg-[#EBF7FF] p-20 mb-20">
							<text class="desc">例如:我想知道我近期的事业发展，以及需要注意的方面有哪些。</text>
						</view>
					</view>
					<view class="box-tips p-20 mb-20">
						<text class="text-sm font-bold ml-10">【温馨提示】</text>
						<text class="text-sm">请认真详细填写问题，并规避攻击他人等敏感字符，否则将被系统判定为无效输入，导致无法提交。</text>
					</view>
					<view class="box-module p-20 mb-20 flex">
						<view class="box-year flex items-center flex-1">
							<view class="label flex-1">出生年份</view>
							<picker-view v-if="true" :value="yearIdx" @change="bindYearChange" class="picker-view">
								<picker-view-column>
									<view class="item" v-for="(item,index) in yearList" :key="index">{{item}}</view>
								</picker-view-column>
							</picker-view>
						</view>
						<!-- <view class="box-birthday flex items-center mb-20"> -->
						<view class="box-year flex items-center">
							<view class="label flex-1 px-20">生肖</view>
							<picker-view v-if="true" :value="zodiacIdx" @change="bindBirthdayChange" class="picker-view">
								<picker-view-column>
									<view class="item" v-for="(item,index) in zodiacList" :key="index">{{item}}</view>
								</picker-view-column>
							</picker-view>
						</view>
						<!-- <view class="box-gender flex items-center"> -->
						<view class="box-year flex items-center">
							<view class="label flex-1 px-20">性别</view>
							<picker-view v-if="true" :value="genderIdx" @change="bindGenderChange" class="picker-view">
								<picker-view-column>
									<view class="item" v-for="(item,index) in genderList" :key="index">{{item}}</view>
								</picker-view-column>
							</picker-view>
						</view>
					</view>
					<view class="box-choose-num mb-20">
						<view class="title flex justify-center items-center mb-20">
							<ImageBoxVue src="/static/icons/title.png" width="35rpx" height="29rpx"></ImageBoxVue>
							<text class="text-sm">请在下方数字盘内点亮3个数字</text>
							<ImageBoxVue src="/static/icons/title.png" width="35rpx" height="29rpx"></ImageBoxVue>
						</view>
						<view class="flex flex-wrap bg-white rounded-md p-20 pb-0">
							<view class="item-num flex justify-center items-center mb-20 rounded-md text-md w-58 h-58"
								:class="[chooseArr.indexOf(item)>-1?'active':'']" @click="handleChoose(item)" v-for="(item, idx) in 78"
								:key="idx">{{item}}</view>
						</view>
					</view>
					<view class="flex justify-center items-center pb-30">
						<view class="btn_next flex justify-center items-center text-white" @click="onPlay">下一步</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		computed,
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import FromList from '@/components/FromList.vue';
	import radioCompVue from '@/components/radioComp.vue';
	import sendSettingVue from "./components/sendSetting.vue"
	import AgreementPlatformVue from '../login/components/AgreementPlatform.vue';
	import communityApi from '@/apis/apiList/communityApi';
	import indexApi from '@/apis/apiList/indexApi.js';
	import testApi from '@/apis/apiList/testApi';

	const typeList = ref([])
	const posts = ref("") // 板块類型
	const bbsplateId = ref("") // 板块Id
	const bbsplate = ref({}) // 板块信息
	const postFrom = ref({
		paysts: 0, //支付方式
		sinpay: "", //支付金额
		prv: 1, //私有
		pret: 1, //解读人数
		sec: 0, //保密
		exp: 0, //游客讲解 
		obs: 0, //评论
		sdes: 0, // 是否有牌阵信息，0否 1是
		describe: "", //描述
		selcard: "", // 
		ppst: 2, // 帖子类型 0 普通贴 1定向贴 2 快速贴
		posts: 3
	})
	const selcard = ref("") // 星图档案ID字符串
	const systemSetting = ref([]) // 系统设置列表
	const isAgree = ref(false)
	const items = ref([])
	const pickerRef = ref(null)
	const deckId = ref("")
	const birthday_str = ref("")
	const year = ref(2000)
	const yearIdx = ref([60])
	const gender = ref("女")
	const genderIdx = ref([1])
	const zodiac = ref("马")
	const zodiacIdx = ref([6])
	const yearList = ref([])
	const num = ref(3);
	const chooseArr = ref([]);
	systemSetting.value = uni.getStorageSync('dict');
	const payList = [{
		text: "蓝钻",
		value: 0
	}, {
		text: "红钻",
		value: 1
	}]
	const zodiacList = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪']
	const genderList = ['男', '女']
	const payPrice = computed(() => {
		if (postFrom.value.sec == 1) {
			return postFrom.value.sinpay * postFrom.value.pret * 1 + 12
		} else {
			return postFrom.value.sinpay * postFrom.value.pret * 1
		}
	})
	watch(() => {
		return postFrom.value.paysts
	}, () => {
		systemSetting.value.map(item => {
			if (postFrom.value.paysts == 0) {
				if (item.name == 'Fastquestion_NumberCardBlue') {
					postFrom.value.sinpay = item.kbidc
				}
			}
			if (postFrom.value.paysts == 1) {
				if (item.name == 'Fastquestion_NumberCardRed') {
					postFrom.value.sinpay = item.kbidc
				}
			}
		})
	}, {
		immediate: true
	})

	onLoad((option) => {
		postFrom.value.describe = option.describe
		systemSetting.value.map(item => {
			if (postFrom.value.paysts == 0) {
				if (item.name == 'Fastquestion_NumberCardBlue') {
					postFrom.value.sinpay = item.kbidc
				}
			}
			if (postFrom.value.paysts == 1) {
				if (item.name == 'Fastquestion_NumberCardRed') {
					postFrom.value.sinpay = item.kbidc
				}
			}
		})
		for (let i = 1940; i <= 2007; i++) {
			yearList.value.push(i)
		}
	})
	const bindYearChange = (e) => {
		yearIdx.value = e.detail.value
		year.value = yearList.value[yearIdx.value[0]]
	}
	const bindBirthdayChange = (e) => {
		zodiacIdx.value = e.detail.value
		zodiac.value = zodiacList[zodiacIdx.value[0]]
	}
	const bindGenderChange = (e) => {
		genderIdx.value = e.detail.value
		gender.value = genderList[genderIdx.value[0]]
	}
	const handleChoose = (item) => {
		if (chooseArr.value.length == num.value) {
			return
		}
		const idx = chooseArr.value.indexOf(item)
		if (idx > -1) {
			chooseArr.value.splice(idx, 1)
		} else {
			chooseArr.value.push(item)
		}
	}
	const onPlay = () => {
		if (postFrom.value.describe == '') {
			uni.showToast({
				icon: "none",
				title: "请填写您的问题！"
			})
			return
		}
		if (year.value == '') {
			uni.showToast({
				icon: "none",
				title: "请选择生日！"
			})
			return
		}
		if (zodiac.value == '') {
			uni.showToast({
				icon: "none",
				title: "请选择生肖！"
			})
			return
		}
		if (chooseArr.value.length != 3) {
			uni.showToast({
				icon: "none",
				title: "请选择数字！"
			})
			return
		}
		const params = {
			"member.id": uni.getStorageSync('user').id,
			"bbsplate.id": '1321849359872032768',
			...postFrom.value,
			problem: `${year.value},${zodiac.value},${gender.value}`,
			"deck.id": "1382936177731960832"
		}
		console.log(params)
		uni.navigateTo({
			url: `/pages/test/testQuick3?describe=${postFrom.value.describe}&selcard=${chooseArr.value.join(',')}&year=${year.value}&zodiac=${zodiac.value}&gender=${gender.value}`
		})
	}
	const bindPickerChange = (e) => {
		zodiacIdx.value = e.detail.value
		zodiac.value = zodiacList[zodiacIdx.value]
	}
	const handleChange = () => {
		uni.$on('chooseNum', (arr) => {
			console.log(arr)
			postFrom.value.selcard = arr.join(',')
		})
		uni.navigateTo({
			url: `/pages/views/chooseNum?num=3`
		})
	}
</script>

<style lang="scss" scoped>
	.position-absolute {
		position: absolute;
		top: -2000rpx;
		z-index: 0;
	}

	.box-problem {
		background: linear-gradient(180deg, #F2F8FF 0%, #D0EDFF 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid;
		border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;

		.desc {
			color: #6A97B4;
		}
	}

	.box-tips {
		background: #FFF7EF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		text {
			font-size: 24rpx;
			color: #D93E29;
		}
	}

	.box-module {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.picker-view {
			width: 96rpx;
			height: 140rpx;
		}

		.item {
			line-height: 58rpx;
			text-align: center;
		}

		.box-year {
			font-weight: 500;
			font-size: 30rpx;
			color: #4370C1;

			.label {
				background: #E3EDFF;
				// border-radius: 8rpx 0rpx 0rpx 8rpx;
				border: 2rpx solid #B4CCF7;
				line-height: 58rpx;
				padding-left: 10rpx;
			}

			.picker-view {
				background: #FFFFFF;
				// border-radius: 8rpx;
				// border: 2rpx solid #B4CCF7;
			}

			.item {
				background: #E3EDFF;
				border: 2rpx solid #B4CCF7;
			}
		}

		.box-birthday {
			font-weight: 500;
			font-size: 30rpx;
			color: #634A97;

			.label {
				background: #F2ECFF;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				border: 2rpx solid #E2D4FF;
				line-height: 58rpx;
				padding-left: 10rpx;
			}

			.picker-view {
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #E2D4FF;
			}

			.item {
				background: #F2ECFF;
				border: 2rpx solid #E2D4FF;
			}
		}

		.box-gender {
			font-weight: 500;
			font-size: 30rpx;
			color: #C3743B;

			.label {
				background: #FFE7D6;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				border: 2rpx solid #FFD8BB;
				line-height: 58rpx;
				padding-left: 10rpx;
			}

			.picker-view {
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #FFD8BB;
			}

			.item {
				background: #FFE7D6;
				border: 2rpx solid #FFD8BB;
			}
		}
	}

	.box-choose-num {
		.title {
			background: linear-gradient(175deg, #D0EDFF 0%, #D0EDFF 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid;
			border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
			padding: 20rpx;

			.text-sm {
				font-weight: bold;
				font-size: 30rpx;
				color: #48A8FF;
				line-height: 30rpx;
				margin: 0 38rpx;
			}
		}

		.item-num {
			margin-right: 42rpx;
			background: #fff;
			border-radius: 8rpx;
			border: 2rpx solid #B0C7DC;
			font-weight: 400;
			font-size: 30rpx;
			color: #8FAAC2;
			line-height: 30rpx;

			&.active {
				background: #E0F0FF;
				border-radius: 8rpx;
				border: 2rpx solid #C8E5FF;
				color: #329EFF;
			}

			&:nth-child(7n) {
				margin-right: 0;
			}
		}
	}

	.btn_next {
		width: 690rpx;
		height: 80rpx;
		background-image: url('/static/user/bg_read.png');
		background-size: cover;
	}
</style>